<template>
	<view class="container">
      <view class="content">
        <view class="content-bg">
            <view class="list">
              <view class="list-left">
                 <u-search 
                 style="width:650rpx"
                 :showAction="false"
                 @change="handchange"
                 placeholder="请输入姓名进行搜索" 
                 v-model="keyword"></u-search>
              </view>
            </view>
            <view v-if="othersList.length>0">
              <view class="list" v-for="(item,index) in othersList" :key="index" @click="jumpTo(item)">
                <view class="list-left">
                  <view class="name"> {{item.name}}</view>
                  <view class="user-info">{{item.gender}} {{item.age}}岁</view>
                </view>
                <view class="list-right">
                  <view class="txt">
                    学部{{item.department}} 学科{{item.subject}}
                  </view>
                  <view class="edit-pic">
                    <image class="pic" src="@/static/rt.png"></image>
                  </view>
                </view>
              </view>
            </view>
            <view v-else class="content-empty">
              <view class="empty">
                <image class="img-empty" src="@/static/empty.png"></image>
              </view>
              <view class="txt">您搜索的无记录请核对信息</view>
            </view>
        </view>
      </view>
 
	</view>
</template>

<script>
	import {
		teacherList,
	} from '@/api/archives.js'
	import archivesView from "../components/archivesView.vue"
	export default {
		data() {
      return {
          keyword:"",
          timer:null,
          searchArr:[],
          othersList:[],
        }
      },
    components:{
      archivesView
    },
	onLoad() {

	},
	methods: {
			rightClick(){},
      archivesChange(){
        this.archivesType = !this.archivesType
      },
      jumpTo(item){
        uni.navigateTo({
          url:"/pages/archives/index/details?type=2&id="+item.id,
        })
      },
      bindPickerChange(e){
        this.index = e.detail.value
        this.selectIndex = this.picker[this.index].value
        console.log(e.detail.value,this.selectIndex)
      },
      handchange(e){
        // this.isSearch = true
          clearTimeout(this.timer);
          this.timer = setTimeout(()=>{
            // console.log('我去请求接口了',this.keyword)
            this.getteacherList()
          },500)
      },
      getteacherList(){
        if(this.keyword)
        teacherList({
          name:this.keyword,
          limit:"10",
          page:"1",
        }).then(res => {
					if(res.code > 0){
            this.othersList = res.data.data
          }
				})
      },
		}
	}
</script>

<style lang="less">
	.container {
    background: #f8f8f8;
    .table{
      width: 100%;
      padding: 20rpx;
      display: flex;
      justify-content: flex-start;
      align-items: flex-end;
      box-sizing: border-box;
    }
    .content{
      width: 100%;
      min-height: calc(100vh - 80rpx);
      background: #f8f8f8;
      .content-bg{
        width: 100%;
        box-sizing: border-box;
        padding: 20rpx 30rpx;
        box-sizing: border-box;
        background: #f8f8f8;
        .list{
          width: 100%;
          background: #ffffff;
          padding: 30rpx 20rpx;
          box-sizing: border-box;
          display: flex;
          border-radius: 10rpx;
          justify-content: space-between;
          align-items: center;
          margin-top: 20rpx;
          position: relative;
          .list-left{ 
            display: flex;
            align-items: flex-end;
            font-size: 25rpx;
            color: #939393;
            .name{
              font-size: 28rpx;
              font-weight: bold;
              color: #353437;
              margin-right: 20rpx;
            }
            .user-info{
              font-size: 26rpx;
              color:#939393;
            }
          }
          .list-right{
              display: flex;
              font-size: 25rpx;
              color: #939393;
            .edit-pic{
              width: 40rpx;
              height: 40rpx;
              .pic{
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }
    }
    .table-btn{
      color: #cfd2d5;
      font-size: 24rpx;
      margin-right: 20rpx;
      line-height: 50rpx;
    }
    .active{
      color: #4871c0;
      font-size: 30rpx;
      font-weight: bold;
      // border-bottom: 2px solid #4871c0;
      // box-sizing: border-box;
      .active-bb{
        margin: 0 auto;
        width: 60rpx;
        border-bottom: 2px solid #4871c0;
      }
    }
    .content-empty{
      margin: 0 auto;
      .empty{
        margin: 200rpx auto 10rpx;
        width: 200rpx;
        height: 180rpx;
        .img-empty{
          width: 100%;
          height: 100%;
        }
      }
      .txt{
        color: #636871;
      }
    }
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
  .screen{
    width: 650rpx;
    // background: red;
  }
  .positions{
    position: absolute;
    top: 30rpx;
    right: 20rpx;
  }
  .mt-88{
    margin-top: 88rpx;
  }
.txt{
  text-align: center;
}

</style>
